<!-- first-input-box 第一种输入框 -->
<template>
  <div class="first-input-box" :class="{'border-active':border_active,'border-width100':borderLength}">
    <span class="c-name"><i class="must-entry" v-if="hKind !== '0'">*</i>{{hPlaceholder}}</span><input ref="cInput" class="c-input" :type="hType" :placeholder="hPlaceholder" :value="value" @input="inputFunc($event, $event.currentTarget)">
  </div>
</template>

<script>
import myClass from '@/assets/js/common'
export default {
  name: 'firstInputBox',
  data () {
    return {
      border_active: false, // 错误展示类
      abc:''
    }
  },
  props: {
    'value': {
      default: () => {
        return ''
      }
    },
    // 输入框placeholder
    'h-placeholder': {
      default: () => {
        return ''
      }
    },
    // 输入框类型type
    'h-type': {
      default: () => {
        return 'text'
      }
    },
    // 0 不校验 1校验下是否为空 2校验下是否为数字
    'h-kind': {
      default: '0',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['0', '1', '2', '3'].indexOf(value) !== -1
      }
    },
    // 用来校验 当变化的时候 一般提交的时候变化
    'h-check': {
      default: 0
    },
    // 是否底部边框填充为100% boolean
    'border-length': {
      default: () => {
        return true
      }
    }
  }, //['value', 'h-placeholder', 'h-type'],
  components: {},

  computed: {},
  watch: {
    hCheck (after) {
      if (this.hKind === '1' && this.value.toString().trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(this.value.toString())) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
      if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(this.value.toString())) {
        this.border_active = false
      } else if (this.hKind === '3') {
        this.border_active = true
      }
    },
    value (after, before) {
      if (this.hKind === '1' && this.value.toString().trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(this.value.toString())) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
      if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(this.value.toString())) {
        this.border_active = false
      } else if (this.hKind === '3') {
        this.border_active = true
      }
    }
  },
  methods: {
    inputFunc (e, target) {
      if (this.hKind === '1' && target.value.toString().trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(target.value.toString())) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
      if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(target.value.toString())) {
        this.border_active = false
      } else if (this.hKind === '3') {
        this.border_active = true
      }
      this.$emit('input', target.value)
    }
  }
}
</script>
